<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="复核商品" left-arrow @click-left="$router.go(-1)"></van-nav-bar>




		<div class="goodsFromWarp" style="margin-bottom: 0px;padding-bottom: 0px;">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">原容器号：</div>
						</div>

						<van-field
							 style="width:180px;"
							 class="skuInput"
							 v-model="editForm.jhrqid"
							 placeholder="请填写原容器号"
							 clearable
							 @keyup="onEnter($event,do_inputspbar)"
						 />

						 <div class="searchBtn">
						 	<button :disabled="isdisabled"  @click.stop="lingquBtn()" >
						 		<van-icon name="search" size="20" color="#1989fa"  />
						 	</button>
						 </div>

				</div>


		</div>


		<div class="table-responsive">
		  <el-table
						border
						header-row-class-name="header-table"
						height="220px"
		        :data="lingquData"
		        style="width: 100%">
					 <el-table-column type="index" 			label="序" 		width="50" align="center"></el-table-column>
		       <el-table-column prop="subname"		label="商品"	width="100" :show-overflow-tooltip="true"> </el-table-column>
		       <el-table-column prop="username"		label="单" 	  width="50" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="unit" 			label="箱装"  width="60" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="pack" 			label="箱数"  width="60" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="qty" 				label="散数" 	width="60" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="yjtotqty" 	label="预计总" width="70" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="qrr" 				label="确认人" width="100" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="oper_jh" 		label="拣货人" width="100" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="ck_storeid" label="目标门店" :show-overflow-tooltip="true"></el-table-column>
					  <el-table-column prop="bill" 			label="波次单号" width="120" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="storename" 	label="门店名称" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="itemid" 		label="商品编码" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="subid" 			label="商品子码" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="kcuom" 			label="单位" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="specs" 			label="规格" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="qr_status" 	label="复核状态" :show-overflow-tooltip="true"></el-table-column>
		       <el-table-column prop="barcode" 		label="条码" :show-overflow-tooltip="true"></el-table-column>
		 </el-table>
		</div>



		<div>
			<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
				总数: &nbsp; &nbsp; &nbsp;{{total}}
			</van-notice-bar>
		</div>



		<div class="goodsInputWarp">
				<div class="goodsInputLabel">
					<div class="goodsInputBorder"></div>
					<div class="skuName">商品编码：</div>
				</div>

				<van-field
					  ref="inputField"
					 class="skuInput"
					 clearable
					 v-model="editForm.itemid"
					 placeholder="请填写商品编码"
					 @keyup="onEnter($event,do_inputspbarSku)"
				 />
				 <div class="searchBtn">
				 	<button :disabled="isdisabled"  @click.stop="searchItemStatus()" >
				 		<van-icon name="search" size="20" color="#1989fa"  />
				 	</button>
				 </div>
		</div>


		<div class="skuBtn" style="justify-content: flex-end;">
			<!-- <van-button type="info" :disabled="isdisabled" @click="saveGoodsBtn()">确认</van-button> -->
			<!-- saveGoodsBtn -->
		</div>


		<van-overlay :show="isSkuVisible" :lock-scroll="false">
			<div class="shipandanWrapper">
					<van-sticky>
						<van-nav-bar class="navBar" title="商品列表" left-arrow @click-left="isSkuVisible = false"></van-nav-bar>
					</van-sticky>
					<div class="shipandanCon" @click.stop>
							<div  v-for="(row,i) in skuData" :key="i" class="danjuRow" @click="selectSkuClick(row,i)" >
								<div class="skuHeader">
									<div class="skuHeaderLabel" style="width:100px;">商品名称：</div>
									<div class="skuHeaderCon">{{row.subname}}</div>
								</div>

								<van-row class="skuList" >
								  <van-col span="24"> <span>条码：</span> {{row.barcode}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="24"> <span>商品编码：</span> {{row.itemid}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>箱装：</span> {{row.unit}}</van-col>
									<van-col span="12"> <span>箱数：</span> {{row.pack}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>散数：</span> {{row.qty}}</van-col>
									<!-- <van-col span="12"> <span>总数量：</span> {{row.jh_totqty}}</van-col> -->
								</van-row>

							</div>
					</div>
			</div>
		</van-overlay>


		<van-overlay :show="isMessageVisible" :lock-scroll="false">
			<div class="messageWarp">
					<div class="messageCon">
							<div class="messageTitle">请确认</div>

							<div class="messageHeader">
									<div class="messageLabel">库区：</div>
									<div class="messageValue">{{ryuser.kqid}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">拣货容器：</div>
									<div class="messageValue">{{editForm.jhrqid}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">商品：</div>
									<div class="messageValue">{{skuRow.subname}}-{{skuRow.itemid}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">条码：</div>
									<div class="messageValue">{{skuRow.barcode}}</div>
							</div>

              <div class="messageHeader">
									<div class="messageLabel">拣货人：</div>
									<div class="messageValue">{{skuRow.barcode}}</div>
							</div>


							<div class="messageHeader">
									<div class="messageLabel">箱装：</div>
									<div class="messageValue">{{skuRow.unit}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">箱：</div>
									<div class="messageValue">{{skuRow.pack}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">散：</div>
									<div class="messageValue">{{skuRow.qty}}</div>
							</div>

							<div class="messageHeader">
									<div class="messageLabel">总数：</div>
									<div class="messageValue">{{parseInt(skuRow.unit) *  parseInt(skuRow.pack) + parseInt(skuRow.qty)}}</div>
							</div>

							<div class="messageHeader" style="color: #f00;" v-if="status == '1'">
									确保数量正确!
							</div>

							<div class="messageHeader" style="color: #f00;" v-if="status == '2'">
									已经复核过!
							</div>

							<div class="messageHeader" style="color: #f00;" v-if="status == '3'">
									所有商品都已复核!
							</div>

							<div class="messageFooter" v-if="status == '2'">
								<div @click="yfhstatus()">确认</div>
							</div>

							<div class="messageFooter" v-else>
								<div @click="deleteBtn()">确认</div>
							</div>
					</div>
			</div>
		</van-overlay>


	</div>
</template>

<script>

export default {
  name: 'fuherongqi',
  data() {
    return {
			editForm:{
				jhrqid:'',  //Z11000002  J10000001 01库区
				itemid:'',  //itemid
				jytotqty:'0',
				jhrqid_mb:'',  //目标容器号
				ck_storeid:'', //目标门店
				jh_totqty:'',
				pack:'',
				qty:'',
				unit:'',
			},
			isdisabled:false,
			lingquData:[],
			isLingQuVisible:false,
			skuData:[
				{
					subname:'',
				}
			],
			isSkuVisible:false,
			index:0,
			skuRow:{},
			timeoutId: null,
			isMessageVisible:false,
			total:0,
			deletedData:[],  //已经删除的数据
			dataToDelete:{   //当前要删除的数据
				barcode:"",
				itemid:"",
				subid:"",
				subsname:"",
			},
			status:'1',   //1请确认数量  2已经复核过 3所有商品都已复核!
		};
  },
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
		yfhstatus(){
			this.status = '1';
			this.isMessageVisible = false
		},
		do_inputspbar(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.jhrqid = pmtxt
			this.lingquBtn()
		},
		lingquBtn(){
			var _self = this;
			_self.total = 0
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_RQFH_qryrqid',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				'jhrqid',this.editForm.jhrqid,
				])
				},'分拨复核',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}

					_self.lingquData = rtn_json_obj
					_self.$toast('查询到'+_self.lingquData.length+'条分拨数据')
					console.log("得到分拨复核领取任务")
					console.log(rtn_json_obj)
					// 查到所有数据有可能是多条
					_self.lingquData = rtn_json_obj

					// 只拿一条
					_self.skuRow 	= rtn_json_obj[0]
					// _self.editForm.itemid = _self.skuRow.itemid
					_self.editForm.bill = _self.skuRow.bill
          _self.deletedData = [] //清空已经删除的数据
					_self.$refs.inputField.focus();
				}
			});
		},
		searchItemStatus(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'}]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_RQFH_qryitemid',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				'itemid',this.editForm.itemid,
				])
				},'校验Item',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}

					_self.editForm.itemid = rtn_json_obj[0].itemid;  //当前要删除的数据
					_self.dataToDelete    = rtn_json_obj[0]  //当前要删除的数据
					console.log("得到校验")
					console.log(_self.dataToDelete)
					_self.deleteSkuData()
				}
			});
		},
		deleteSkuData(){
			// 检查数据是否已经被删除
			const alreadyDeleted = this.deletedData.find(item => item.itemid === this.dataToDelete.itemid);

			// 查找后端数据中是否包含要删除的数据
			const existInList = this.lingquData.find(item => item.itemid === this.dataToDelete.itemid);

			if (alreadyDeleted) {
				// 商品已在删除列表中
				console.log("当前数据已经删除过了");
				this.status = '2'
				this.isMessageVisible = true
				this.editForm.itemid = ''
				return;
			}

			if (!existInList) {
				// 商品不在未删除列表中
				this.$toast.fail("库区" + this.ryuser.kqid + "拣货容器" + this.editForm.jhrqid + "\n没有商品" + this.dataToDelete.itemid + "-" + this.dataToDelete.subname + "!")
				this.editForm.itemid = ''
				return;
			}

			if(this.lingquData.length === 1){
				this.status = '3'
			}

			// 展示当前要删除的数据
			this.skuRow = existInList
			this.isMessageVisible = true
			this.total += parseInt(existInList.unit) * parseInt(existInList.pack) + parseInt(existInList.qty)
		},
		deleteBtn(){
			const index = this.lingquData.findIndex(item => item.itemid === this.skuRow.itemid);
			 if (index !== -1) {
				  if (this.lingquData.length === 1) {
						// 调用后端接口
						console.log("调用后端接口")
						this._getTotalSku()
				  }

					// 从后端数据中删除
					this.lingquData.splice(index, 1);
					this.editForm.itemid = ''
					this.$refs.inputField.focus();
					// 将删除的数据存储到 deletedData 中
				  this.deletedData.push(this.skuRow);

			  }else {
				    console.log("当前数据不在后端数据中");
			  }
				this.isMessageVisible = false
		},
		saveGoodsBtn(){
			this.isMessageVisible = true
		},
		do_inputspbarSku(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.itemid = pmtxt
			this.searchItemStatus()
		},
		searchSkuBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_RQFH_qryrqid',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				'jhrqid',this.editForm.jhrqid,
				'itemid',this.editForm.itemid,
				])
				},'分拨复核',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到分拨复核查询单条商品")
					console.log(rtn_json_obj)
					_self.skuData = rtn_json_obj
					_self.skuRow 	= rtn_json_obj[0]
					_self.editForm.itemid = _self.skuRow.itemid
					_self.editForm.bill = _self.skuRow.bill
					console.log(_self.skuRow)
				}
			});
		},
		_getSku(){
			if(this.skuData.length > 0){
				this.isSkuVisible = true
			}
		},
		selectSkuClick(row){
				this.skuRow  = row
				this.editForm.itemid = row.itemid
				this.editForm.bill = row.bill
				this.isSkuVisible = false
		},

		_getTotalSku(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_RQFH_qritemid',
				'czyid',this.ryuser.operatorid,
				'kqid', this.ryuser.kqid,
				'jhrqid',this.editForm.jhrqid,
				'bill',this.editForm.bill,
				'jytotqty',this.total,
				])
				},'分拨复核',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("得到分拨保存")
					console.log(rtn_json_obj)

					if(rtn_json_obj[0].ret_ret == '-1'){
							_self.$toast(rtn_json_obj[0].ret_mess)
						}else{
						_self.$toast(rtn_json_obj[0].ret_mess)
						_self.editForm.itemid  = ''
						_self.editForm.jhrqid  = ''
						_self.editForm.bill  	 = ''
						_self.skuRow = {}
						_self.total  = 0
						_self.lingquData = []
						_self.deletedData = []
						_self.isMessageVisible = false
            _self.status = '1' // 复核完成
					}
				}
			});
		},
  },
  mounted() {

  },
	components: {

	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}


	div.messageWarp{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: bold;
		div.messageCon{
			width:80%;
			height:400px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;
			.messageTitle{
				width: 100%;
				background-color: #1989fa;
				height: 38px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
			}
			.messageHeader{
				display: flex;
				// height: 30px;
				box-sizing: border-box;
				padding:5px 5%;
				font-size: 14px;
				width: 100%;
				div.messageLabel{
					width: 80px;
				}
				div.messageValue{
					width: calc(100% - 80px);
					white-space: normal
				}
			}
			div.messageFooter{
				display: flex;
				width: 100%;
				height: 41px;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: #1989fa;
				div{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					color: #fff;
				}
				// div:nth-child(1){
				// 	color: #1989fa;
				// }

				// div:nth-child(2){
				// 	color: #fff;
				// 	background-color: #1989fa;
				// 	border-radius: 0 0 10px 0px;
				// }
			}
		}
	}




	.searchGoodsBtn{
		width:130px;
		font-size:18px;
		button{
			width: 100%;
			height: 100%;
			background-color: #EBF3FF;
			border: none;
			color: #1989fa;
		}
	}


div.table-responsive{
	width: 100%;
	overflow: auto;
}


.header-table th{
	background-color: #1989fa !important;
	padding: 0 !important;
}

/deep/.el-table th.el-table__cell{
	background-color: #1989fa !important;
	color: #fff !important;
	padding: 8px !important;
	color: #666;
}


/deep/.el-table .el-table__cell{
	padding: 8px !important;
}
</style>
